﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/MasterPage.master" %>
<%@ Register Assembly="Typps" Namespace="Typps" TagPrefix="t" %>
<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .slidepane
        {
            color:White;
            border:solid 1px #000;	
            background:#b61736 url(  "Images/slidepanebodynoise.jpg" ) repeat;
            margin:5px;
        }
        .slidepane .body{}
            .slidepane .body.vertical {	width:300px; }
        .padding{padding:5px;}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1>Typps Slide pane</h1>
<p>The slide pane is a very simple templated control that allows you to make regions within your page collapsible and fits in nicely with the flow of your pages, reclaiming empty
space during an expansion and vice versa. By default there are 3 themes supported and in addition you can customize all areas yourself with minimum effort modifying the developer friendly css to your liking.</p>
<t:SlidePane ID="slidepane1" Skin="Classic" runat="server">
            <PaneTemplate>
                <dl class="padding">
                    <dt>Definition list</dt>
                    <dd>
                        Etiam commodo iaculis tincidunt. Etiam dignissim quam id diam posuere mollis. Praesent
                        vulputate tortor arcu. Cras sed leo enim, vitae venenatis felis.</dd>
                    <dt>Lorem ipsum dolor sit amet</dt>
                    <dd>
                        Vestibulum quis nulla id odio faucibus feugiat a non nibh. Incididunt ut labore
                        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                        laboris nisi ut aliquip ex ea commodo consequat.</dd>
                </dl>
            </PaneTemplate>
        </t:SlidePane>
        <br style="clear:both"/>
        <p>
            The above pane is collapsible. Collapsing panes gives you more screen estate. What
            you see above is the SlidePane Control in it's default mode, where the toggle
            button is displayed horizontally.</p>
        <p>
            You simply specify what you want in the collapsible template ( serverside) and it
            just works.</p>
        <h2>
            ASP.NET</h2>
          <div>
              <pre><span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">t</span>:<span style="color: rgb(255, 0, 0);">SlidePane</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span style="color: rgb(0, 0, 255);">"slidepane1"</span> <span style="color: rgb(255, 0, 0);">Skin</span>=<span style="color: rgb(0, 0, 255);">"Classic"</span> <span style="color: rgb(255, 0, 0);">runat</span>=<span style="color: rgb(0, 0, 255);">"server"</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />            <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">PaneTemplate</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />		<span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">h1</span><span style="color: rgb(0, 0, 255);">&gt;</span>The content you want in the pane..<span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">h1</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />            <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">PaneTemplate</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />        <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">t</span>:SlidePane<span style="color: rgb(0, 0, 255);">&gt;</span><br /></pre>
            </div>
            <br style="clear:both" />
      <hr />
      <div>
          <t:SlidePane ID="slidepane2" ToggleButtonOrientation="Vertical" Skin="Classic" Expanded="false"
              runat="server">
              <PaneTemplate>
                  <dl class="padding">
                      <dt>Definition list</dt>
                      <dd>
                          Etiam commodo iaculis tincidunt. Etiam dignissim quam id diam posuere mollis. Praesent
                          vulputate tortor arcu. Cras sed leo enim, vitae venenatis felis.</dd>
                      <dt>Lorem ipsum dolor sit amet</dt>
                      <dd>
                          Vestibulum quis nulla id odio faucibus feugiat a non nibh. Incididunt ut labore
                          et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                          laboris nisi ut aliquip ex ea commodo consequat.</dd>
                  </dl>
              </PaneTemplate>
          </t:SlidePane>
          <p>
              The toggle button vertical and position it to the far right edge or left
              edge. This is accomplished by setting ToggleButtonOrientation="Vertical".We can
              also state that by default the pane should be collapsed by setting Expanded="false".</p>
          <h2>
              ASP.NET</h2>
             <div>
                <pre><span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">t</span>:<span style="color: rgb(255, 0, 0);">SlidePane</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span style="color: rgb(0, 0, 255);">"slidepane2"</span> <span style="color: rgb(255, 0, 0);">Expanded</span>=<span style="color: rgb(0, 0, 255);">"false"</span> <br /><span style="color: rgb(255, 0, 0);">ToggleButtonOrientation</span>=<span style="color: rgb(0, 0, 255);">"Vertical"</span> <span style="color: rgb(255, 0, 0);">Skin</span>=<span style="color: rgb(0, 0, 255);">"Classic"</span> <span style="color: rgb(255, 0, 0);">runat</span>=<span style="color: rgb(0, 0, 255);">"server"</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />            <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">PaneTemplate</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />		<span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">h1</span><span style="color: rgb(0, 0, 255);">&gt;</span>The content you want in the pane..<span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">h1</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />            <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">PaneTemplate</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />        <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">t</span>:SlidePane<span style="color: rgb(0, 0, 255);">&gt;</span><br /></pre>
            </div>
        </div>
         <br style="clear:both" />
        <hr/>
        <div>
            <t:SlidePane ID="slidepane3" ToggleButtonFloat="Right" ToggleButtonOrientation="Vertical"
                Skin="Classic" runat="server">
                <PaneTemplate>
                    <dl class="padding">
                        <dt>Definition list</dt>
                        <dd>
                            Etiam commodo iaculis tincidunt. Etiam dignissim quam id diam posuere mollis. Praesent
                            vulputate tortor arcu. Cras sed leo enim, vitae venenatis felis.</dd>
                        <dt>Lorem ipsum dolor sit amet</dt>
                        <dd>
                            Vestibulum quis nulla id odio faucibus feugiat a non nibh. Incididunt ut labore
                            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat.</dd>
                    </dl>
                </PaneTemplate>
            </t:SlidePane>
            <dl class="padding">
                <dt>Definition list</dt>
                <dd>
                    Etiam commodo iaculis tincidunt. Etiam dignissim quam id diam posuere mollis. Praesent
                    vulputate tortor arcu. Cras sed leo enim, vitae venenatis felis.</dd>
                <dt>Lorem ipsum dolor sit amet</dt>
                <dd>
                    Vestibulum quis nulla id odio faucibus feugiat a non nibh. Incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat.</dd>
            </dl>
            <p>
                We can further position the toggle button to the far right by setting ToggleButtonFloat="Right"
                ; Note how unused space is reclaimed as the control slides in and out of view.</p>
            <h2>
                ASP.NET</h2>
            <div>
                <pre><span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">t</span>:<span style="color: rgb(255, 0, 0);">SlidePane</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span style="color: rgb(0, 0, 255);">"slidepane3"</span> <span style="color: rgb(255, 0, 0);">ToggleButtonFloat</span>=<span style="color: rgb(0, 0, 255);">"Right"</span> <br />	<span style="color: rgb(255, 0, 0);">ToggleButtonOrientation</span>=<span style="color: rgb(0, 0, 255);">"Vertical"</span> <br />                <span style="color: rgb(255, 0, 0);">Skin</span>=<span style="color: rgb(0, 0, 255);">"Classic"</span> <span style="color: rgb(255, 0, 0);">runat</span>=<span style="color: rgb(0, 0, 255);">"server"</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />            <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">PaneTemplate</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />		<span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">h1</span><span style="color: rgb(0, 0, 255);">&gt;</span>The content you want in the pane..<span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">h1</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />            <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">PaneTemplate</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />        <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">t</span>:SlidePane<span style="color: rgb(0, 0, 255);">&gt;</span><br /></pre>
            </div>
        </div>
         <br style="clear:both" />
        <hr/>
        <div>
            <t:SlidePane ID="slidepane4" Expanded="false" Float="Left" ToggleButtonOrientation="Vertical" Skin="Classic"
                runat="server">
                <PaneTemplate>
                    <dl class="padding">
                        <dt>Definition list</dt>
                        <dd>
                            Etiam commodo iaculis tincidunt. Etiam dignissim quam id diam posuere mollis. Praesent
                            vulputate tortor arcu. Cras sed leo enim, vitae venenatis felis.</dd>
                        <dt>Lorem ipsum dolor sit amet</dt>
                        <dd>
                            Vestibulum quis nulla id odio faucibus feugiat a non nibh. Incididunt ut labore
                            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat.</dd>
                    </dl>
                </PaneTemplate>
            </t:SlidePane>
            <p>
                You can very well disable the special effects. And easily float it to the left as
                the current pane positioned to the left. These are all merrily simple settings.
                As for appearance you work with a basic css file containing some very simple css
                class definitions to customize the toggle button and the pane in general.</p>
            <h2>
                ASP.NET</h2>
              <div>
               <pre><span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">t</span>:<span style="color: rgb(255, 0, 0);">SlidePane</span> <span style="color: rgb(255, 0, 0);">ID</span>=<span style="color: rgb(0, 0, 255);">"slidepane4"</span> <span style="color: rgb(255, 0, 0);">EnableEffects</span>=<span style="color: rgb(0, 0, 255);">"false"</span> <span style="color: rgb(255, 0, 0);">Float</span>=<span style="color: rgb(0, 0, 255);">"Left"</span> <br />	<span style="color: rgb(255, 0, 0);">ToggleButtonOrientation</span>=<span style="color: rgb(0, 0, 255);">"Vertical"</span> <span style="color: rgb(255, 0, 0);">Skin</span>=<span style="color: rgb(0, 0, 255);">"Classic"</span><br />                <span style="color: rgb(255, 0, 0);">runat</span>=<span style="color: rgb(0, 0, 255);">"server"</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />     <span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">PaneTemplate</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />	<span style="color: rgb(0, 0, 255);">&lt;</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">&gt;</span>Content you want displayed in the slide pane..<span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">&gt;</span><br />     <span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">PaneTemplate</span><span style="color: rgb(0, 0, 255);">&gt;</span><br /><span style="color: rgb(0, 0, 255);">&lt;/</span><span style="color: rgb(128, 0, 0);">t</span>:SlidePane<span style="color: rgb(0, 0, 255);">&gt;</span><br /></pre>
               </div>
        </div>
        <br style="clear: both" />
</asp:Content>

